@import "./lib/variable";

.textStyle img{
  margin: 0 auto;
  display: block;
  height: 325rem*0.88 / @pxToRem;
}

.textStyle p{
  text-indent: 2em;
  font-size:20rem / @pxToRem;
  line-height: 2;
  color: #010101;
  text-align: left;
  text-align: justify;
  margin: 0;
}
.smFontSize p{
  font-size:20rem / @pxToRem;
}

.bussiness-animated-word {
  font-family: Helvetica, Arial, sans-serif;
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 640rem / @pxToRem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.03);
  animation: bussinessWordMove 60s linear;
  animation-direction: alternate;
}

@keyframes bussinessWordMove {
  0% {
    right: -2200rem / @pxToRem;
  }
  100% {
    right: 0px;
  }
}

.richTextBox {
  max-width: 880rem / @pxToRem;
  margin-top: 120rem / @pxToRem;
  margin-left: 180rem / @pxToRem;
  position: relative;
  h3{
    padding: 20rem / @pxToRem 0 10rem / @pxToRem 0;
    margin: 0;
    font-size:24rem / @pxToRem;
    color: #0a97de;
  }
  p{
    text-indent: 2em;
    font-size:22rem / @pxToRem;
    line-height: 2;
    color: #010101;
    text-align: left;
    text-align: justify;
    margin: 0;
  }
  &::after {
    content: '';
    position: absolute;
    left: -36rem / @pxToRem;
    top: 20rem / @pxToRem;
    width: 2px;
    height: 200rem*0.88 / @pxToRem;
    background: #00adee;
  }
  img{
    width: 642rem / @pxToRem;
  }
}

.bussiness-video {
  width: 630rem / @pxToRem;
  overflow: hidden;
  position: relative;
}
.columnFlex{
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}
.topFlexBox{
  height: 62.8%;
  width: 100%;
  display: flex;
  flex-direction: row;
  .leftFlexBox{
    width: 46%;
    height: 100%;
    background: url("../images/ugly_bg.png") repeat;
    position: relative;
    img{
      width: 473rem / @pxToRem;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
  .rightFlexBox{
    flex: 1;
    height: 100%;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
.bottomFlexBox{
  height: 37.2%;
  width: 100%;
  position: relative;
  .sub-title-box {
    position: absolute;
    bottom: 50rem / @pxToRem;
    right: 10%;
    text-align: right;
    font-size: 0;
    span {
      display: inline-block;
      font-size: 25rem / @pxToRem;
      margin-left: 10rem/@pxToRem;
      vertical-align: middle;
      &.legend {
        height: 25rem / @pxToRem;
        width: 50rem / @pxToRem;
        margin-left: 28rem / @pxToRem;
      }
    }
  }

  .small {
    background-color: #04e2bb;
  }
  .big {
    background-color: #00adee;
  }
  table {
    width: 100%;
    border-collapse: collapse;
  }
  thead {
    background-color: #0264a0;
    color: #fff;
    font-weight: normal;
    font-size: 22rem / @pxToRem;
    text-align: center;
    th {
      height: 40rem / @pxToRem;
    }
  }
  tbody {
    tr {
      background-color: #eef3ff;
      border-bottom: 2px solid #fff;
      td {
        height: 40rem / @pxToRem;
        font-size: 19rem / @pxToRem;
        color: #333;
        text-indent: 3em;
        > span {
          display: block;
          height: 35rem / @pxToRem;
        }
        .span1, .span2 {
          width: 100%;
        }
        .span3 {
          width: 54.44%;
        }
        .span4 {
          width: 15.47278%;
        }
        p {
          line-height: 1;
          text-align: justify;
        }
      }
      td:nth-child(4){
        width: 40%;
      }
    }
  }
  .table-des {
    list-style: none;
    padding: 0 0 0 10rem / @pxToRem;
    font-size: 23rem / @pxToRem;
    line-height: 2.2;
    li {
      position: relative;
      text-indent: 1em;
      line-height: 2;
      &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 13rem / @pxToRem;
        height: 13rem / @pxToRem;
        margin-top: -6.5rem / @pxToRem;
        border-radius: 100%;
        background-color: #04e2bb;
      }
    }
  }


  img{
    width: 100%;
    height: 95%;
  }
}
.initbussinessImg{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 99;
  background: url("../images/bussiness9.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

/*@media only screen and (min-width: 1441px) and (max-width: 1691px){
  !*@bigScreenScale  字体大小比例*!
  .textStyle img{
    height: 28rem * @bigScreenScale;
  }

  .textStyle p{
    text-indent: 2em * @bigScreenScale;
    font-size:1.2rem * @bigScreenScale;
  }

  .bussiness-animated-word {
    margin-top: 5rem * @bigScreenScale;
    font-size: 38rem * @bigScreenScale;
  }

  .richTextBox {
    max-width: 42rem * @bigScreenScale;
    margin-top: 9rem * @bigScreenScale;
    margin-left: 14rem * @bigScreenScale;
    h3{
      padding: 1rem * @bigScreenScale 0 .5rem * @bigScreenScale 0;
      font-size:1.5rem * @bigScreenScale;
    }
    p{
      text-indent: 2em * @bigScreenScale;
      font-size:1.2rem * @bigScreenScale;
    }
    &::after {
      left: -1.8rem * @bigScreenScale;
      top: 1rem * @bigScreenScale;
      width: 2px * @bigScreenScale;
      height: 10rem * @bigScreenScale;
    }
  }

  .bussiness-video {
    width: 31rem * @bigScreenScale;
  }
  .topFlexBox{
    .leftFlexBox{
      img{
        width: 32rem * @bigScreenScale;
      }
    }
  }
}

@media only screen and (min-width: 1281px) and (max-width: 1440px){
  !*@normalScreenScale 字体大小比例*!
  .textStyle img{
    height: 28rem * @normalScreenScale;
  }

  .textStyle p{
    text-indent: 2em * @normalScreenScale;
    font-size:1.2rem * @normalScreenScale;
  }

  .bussiness-animated-word {
    margin-top: 5rem * @normalScreenScale;
    font-size: 38rem * @normalScreenScale;
  }

  .richTextBox {
    max-width: 42rem * @normalScreenScale;
    margin-top: 5rem * @normalScreenScale;
    margin-left: 14rem * @normalScreenScale;
    h3{
      padding: 1rem * @normalScreenScale 0 .5rem * @normalScreenScale 0;
      font-size:1.5rem * @normalScreenScale;
    }
    p{
      text-indent: 2em * @normalScreenScale;
      font-size:1.2rem * @normalScreenScale;
      line-height: 1.5;
    }
    &::after {
      left: -1.8rem * @normalScreenScale;
      top: 1rem * @normalScreenScale;
      width: 2px * @normalScreenScale;
      height: 10rem * @normalScreenScale;
    }
  }

  .bussiness-video {
    width: 31rem * @normalScreenScale;
  }
  .topFlexBox{
    .leftFlexBox{
      img{
        width: 32rem * @normalScreenScale;
      }
    }
  }
}

@media only screen and (min-width: 981px) and (max-width: 1280px) {
  !* @minScreenScale 字体大小比例*!
  .textStyle img{
    height: 28rem * @minScreenScale;
  }

  .textStyle p{
    text-indent: 2em * @minScreenScale;
    font-size:1.2rem * @minScreenScale;
  }

  .bussiness-animated-word {
    margin-top: 5rem * @minScreenScale;
    font-size: 38rem * @minScreenScale;
  }

  .richTextBox {
    max-width: 42rem * @minScreenScale;
    margin-top: 9rem * @minScreenScale;
    margin-left: 14rem * @minScreenScale;
    h3{
      padding: 1rem * @minScreenScale 0 .5rem * @minScreenScale 0;
      font-size:1.5rem * @minScreenScale;
    }
    p{
      text-indent: 2em * @minScreenScale;
      font-size:1.2rem * @minScreenScale;
    }
    &::after {
      left: -1.8rem * @minScreenScale;
      top: 1rem * @minScreenScale;
      width: 2px * @minScreenScale;
      height: 10rem * @minScreenScale;
    }
  }

  .bussiness-video {
    width: 31rem * @minScreenScale;
  }
  .topFlexBox{
    .leftFlexBox{
      img{
        width: 32rem * @minScreenScale;
      }
    }
  }
}

@media only screen and (min-width: 737px) and (max-width: 980px) {
  !* @padScreenScale 字体大小比例*!
  .textStyle img{
    height: 28rem * @padScreenScale;
  }

  .textStyle p{
    text-indent: 2em * @padScreenScale;
    font-size:1.2rem * @padScreenScale;
  }

  .bussiness-animated-word {
    margin-top: 5rem * @padScreenScale;
    font-size: 38rem * @padScreenScale;
  }

  .richTextBox {
    max-width: 42rem * @padScreenScale;
    margin-top: 9rem * @padScreenScale;
    margin-left: 14rem * @padScreenScale;
    h3{
      padding: 1rem * @padScreenScale 0 .5rem * @padScreenScale 0;
      font-size:1.5rem * @padScreenScale;
    }
    p{
      text-indent: 2em * @padScreenScale;
      font-size:1.2rem * @padScreenScale;
    }
    &::after {
      left: -1.8rem * @padScreenScale;
      top: 1rem * @padScreenScale;
      width: 2px * @padScreenScale;
      height: 10rem * @padScreenScale;
    }
  }

  .bussiness-video {
    width: 31rem * @padScreenScale;
  }
  .topFlexBox{
    .leftFlexBox{
      img{
        width: 32rem * @padScreenScale;
      }
    }
  }
}

@media only screen and (min-width: 481px) and (max-width: 736px) {
  !*@smallScreenScale  字体大小比例*!
  .textStyle img{
    height: 28rem * @smallScreenScale;
  }

  .textStyle p{
    text-indent: 2em * @smallScreenScale;
    font-size:1.2rem * @smallScreenScale;
  }

  .bussiness-animated-word {
    margin-top: 5rem * @smallScreenScale;
    font-size: 38rem * @smallScreenScale;
  }

  .richTextBox {
    max-width: 42rem * @smallScreenScale;
    margin-top: 9rem * @smallScreenScale;
    margin-left: 14rem * @smallScreenScale;
    h3{
      padding: 1rem * @smallScreenScale 0 .5rem * @smallScreenScale 0;
      font-size:1.5rem * @smallScreenScale;
    }
    p{
      text-indent: 2em * @smallScreenScale;
      font-size:1.2rem * @smallScreenScale;
    }
    &::after {
      left: -1.8rem * @smallScreenScale;
      top: 1rem * @smallScreenScale;
      width: 2px * @smallScreenScale;
      height: 10rem * @smallScreenScale;
    }
  }

  .bussiness-video {
    width: 31rem * @smallScreenScale;
  }
  .topFlexBox{
    .leftFlexBox{
      img{
        width: 32rem * @smallScreenScale;
      }
    }
  }
}

@media only screen and (max-width: 480px) {

}*/
